<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>用CSS规范进行多行省略</title>
</head>
<body>
  <div>
    <p>
      Etiam commodo vestibulum sem in euismod. Quisque dapibus ac odio eget mattis. Donec tincidunt porta scelerisque. Curabitur gravida ex in erat venenatis elementum. Nulla imperdiet, lectus id finibus lacinia, quam urna laoreet massa, in ultricies metus metus vel nisl. In a bibendum enim, sit amet iaculis lorem. Integer vestibulum at odio a feugiat. Donec vitae erat vitae eros sodales bibendum. Sed id lorem et ante tincidunt auctor. Aliquam erat volutpat. Aenean fringilla scelerisque quam eu tristique. Aenean ac arcu sed enim mattis laoreet eu in odio. Aliquam in leo mattis, interdum dui non, egestas enim. Mauris at pulvinar ipsum, eu iaculis eros. Aliquam interdum enim et erat feugiat tincidunt. Etiam a ornare nulla, a bibendum orci.
    </p>
  </div>
</body>
<style>
  div {
    
    width: 20%;
    border: black solid 1px;
    /* 用overflow来防止溢出 */
  }

  p {
    height: 287px;
    overflow: hidden;
    /* 需要设置相对位置 */
    position: relative;

    /* 为省略号预留空间 */
    padding-right: 1em;
    /* 文本对齐 */
    text-align: justify;
  }

  /* 设置before */
  p::before {
    content: '...';
    position: absolute;
    /* 将省略号放到右下角 */
    right: 0;
    bottom: 0;
  }

  /* 设置另一个元素用于防止多余的省略号 */
  /* 这个办法有点烂，而且有不知名bug */
  p::after {
    content: '';
    background-color: rgb(146, 99, 27);
    /* width: 1em;
    height: 1em; */
    position: absolute;
    display: inline;
  }
</style>
</html>